<template>
  <div class="commentSectionCont">
    <el-input
      v-model="commentInfo"
      type="textarea"
      placeholder="请输入评论"
      :maxlength="140"
      :show-word-limit="true"
      :rows="3"
      :resize="'none'"
    />
    <div class="publishCommentRow">
      <div>表情/话题/@</div>
      <div>
        <div class="pulbishBtn">评论</div>
      </div>
    </div>
    <div class="newestComments" v-if="playlistCommentData?.hotComments">
      <div class="title">精彩评论</div>
      <div class="list">
        <CommentFloorVue
          v-for="comment in playlistCommentData.hotComments"
          :comment-data="comment"
        />
      </div>
    </div>
    <div class="newestComments">
      <div class="title">最新评论({{ playlistCommentData?.total }})</div>
      <div class="list">
        <CommentFloorVue
          v-for="comment in playlistCommentData?.comments"
          :comment-data="comment"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { usePlayListComment } from "@/hooks/commentHook";
import CommentFloorVue from "../CommentFloor/CommentFloor.vue";
const props = defineProps<{
  playlistId?: number | string;
  albumnId?: number | string;
  commentSource: keyof {
    albumn: string;
    playlist: string;
    mv: string;
    song: string;
  };
}>();

const commentInfo = ref("");
const { playlistCommentData, queryPlaylistComment } = usePlayListComment();

onMounted(() => {
  if (props.commentSource === "playlist" && props.playlistId) {
    queryPlaylistComment({
      id: props.playlistId,
      offset: 0,
      limit: 50,
    });
  }
});
</script>

<style scoped lang="less">
.commentSectionCont {
  .publishCommentRow {
    color: #666;
    margin-top: 10px;
    height: 32px;
    display: flex;
    justify-content: space-between;
    .pulbishBtn {
      border: 1px solid #dbdbdb;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;

      width: 60px;
      cursor: pointer;
      &:hover {
        background-color: #f2f2f2;
      }
      border-radius: 16px;
    }
  }
  .newestComments {
    margin-top: 10px;
    .title {
      color: #333;
      font-weight: bold;
      font-size: 18px;
    }
  }
}
</style>
